<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jq过滤</title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>

</head>
<body>
    <h1>欢迎访问我的主页</h1>
    <div>
        <p>这是 div 中的一个段落。</p>
    </div>

    <div>
        <p>这是另外一个 div 中的一个段落。</p>
        <p>我是最后一个p元素</p>
    </div>

    <p>这是一个段落。</p>
    <hr>

    <h1>欢迎访问我的主页</h1>
    <p class="cainiao">菜鸟教程 (index 0).</p>
    <p class="cainiao">http://www.runoob.com (index 1)。</p>
    <p class="cainiao">google (index 2).</p>
    <p>http://www.google.com (index 3)。</p>

</body>
<script>
    $(function(){
        // first():返回被选元素的第一个元素
        $("div p").first().css("background-color","orange")
        // last():返回被选元素的最后一个元素
        $("div p").last().css("color","red")
        // eq():返回被选元素中带有指定索引号的元素,索引从0开始
        $("p").eq(2).css("fontSize","40px")
        // filter():不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
        $("p").filter(".cainiao").css("background","#bfa")
        // not():与filter相反,表示返回不匹配标准的所有元素
        $("p").not(".cainiao").css("color","gray")
    })
</script>
</html>